import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Button,
  message,
  Card,
  Modal,
  InputNumber,
} from 'antd';
import styles from './system.less';
import {ruleP, nameMaxLength,remarkMaxLength} from '@/utils/rule'
const FormItem = Form.Item;
const { TextArea } = Input;

@connect(({sysytem, loading }) => ({
  sysytem,
  loading: loading.models.sysytem,
}))
@Form.create()
class system extends PureComponent {
  handleSubmit = e => {
    const { dispatch, form, sysytem: { data }} = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.update(Object.assign(values,{id:data.dataList[0].id}))
      }
    });
  };

  // 提交
  update(e) {
    const { dispatch } = this.props;
    const values = {
     userType: 0,
     totalSize: e.totalSize,
     remark: e.remark,
     id: e.id,
    };

    dispatch({
      type: 'sysytem/update',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({
            title: res.msg,
          });
          this.pageList();
        }else {
          Modal.error({
            title: '操作失败',
            content: res.msg,
          });
        }
      },
    });
  }

  // 查询
  pageList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysytem/queryList',
      payload: {userType:0},
    });
  }

  componentDidMount() {
    this.pageList();
  }

  render() {
    const { submitting } = this.props;
    const {
      form: { getFieldDecorator, getFieldValue },
      sysytem: { data },
    } = this.props;
    const oneData = data&&data.dataList&&data.dataList.length&&data.dataList[0] || {};

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
          <FormItem {...formItemLayout} label="系统名称">
            <span className="ant-form-text">数据安管追溯系统</span>
          </FormItem>

          <FormItem {...formItemLayout} label="空间分配">
            {getFieldDecorator('totalSize',{rules: [{ required: true,message:'空间分配不能为空'}],
              initialValue: oneData.totalSize || ''})(
              <InputNumber min={0} max={2147483648} step={10} placeholder="最大2T" style={{width:'300px'}} />
              )
            }&nbsp;&nbsp;M/人
          </FormItem>

          <FormItem {...formItemLayout} label="备注">
            {getFieldDecorator('remark',{rules:[{max:remarkMaxLength()[0],message:remarkMaxLength()[1]}],initialValue: oneData.remark || ''})(
              <TextArea
                style={{minHeight: 32}}
                placeholder="请输入"
                rows={2}
              />)}
          </FormItem>

          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              提交
            </Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}

export default system;
